<template>
  <view class="tabbar">
    <view 
      v-for="(item, index) in tabItems" 
      :key="index" 
      class="tab-item" 
      :class="{ active: current === index }"
      @click="switchTab(index, item.pagePath)"
    >
	 <view class="img-box" :class="{ 'img-box-active': current === index }">
		 <image :src="current === index ? item.selectedIconPath : item.iconPath" class="icon"  mode="aspectFit"/>
	 </view>
    </view>
  </view>
</template>

<script>
	// "backgroundColor": "rgb(47, 47, 47)",
export default {
  props: {
    current: Number
  },
  data() {
    return {
      tabItems: [
        {
          "pagePath": "/pages/index/index",
          "text": "",
          "iconPath": "/static/tabbar/dragon.png",
          "selectedIconPath": "/static/tabbar/dragon.png"
        },
        {
          "pagePath": "/pages/warehouse/index",
          "text": "",
          "iconPath": "/static/tabbar/warehouse.png",
          "selectedIconPath": "/static/tabbar/warehouse.png"
        },
        {
          "pagePath": "/pages/info/index",
          "text": "",
          "iconPath": "/static/tabbar/msg.png",
          "selectedIconPath": "/static/tabbar/msg.png"
        },
        {
          "pagePath": "/pages/profile/index",
          "text": "",
          "iconPath": "/static/tabbar/profile.png",
          "selectedIconPath": "/static/tabbar/profile.png"
        }
      ]
    };
  },
  methods: {
    switchTab(index, path) {
      if (this.current !== index) {
        uni.switchTab({ url: path });
      }
    }
  }
};
</script>

<style scoped>
.tabbar {
  display: flex;
  position: fixed;
  bottom: env(safe-area-inset-bottom);
  left: 0;
  right: 0;
  height: 136rpx;
  background: rgb(47, 47, 47);
}
.tab-item {
  flex: 1;
  text-align: center;
  padding: 10rpx 10rpx;
}
.img-box {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	border: 10rpx solid transparent;
	overflow: hidden;
}
	
.img-box-active {
	border-color: rgb(246,196, 74);
}

.icon {
  position: relative;
  width: 100rpx;
  height: 100rpx;
}
.active {
  color: #ff0000;
}
</style>
